<template>
    <header class="xf-header xf-shadow-out">
        <div class="xf-vague"></div>
        <div class="xf-info core">
            <div class="xf-avatar">
                <!-- 质感效果 -->
                <img v-lazy="texture">
                <!-- 头像 -->
                <img v-lazy="avatar">
            </div>
            <h2 class="xf-name">{{ name }}</h2>
            <p class="xf-profile">{{ profile }}</p>
            <h3 class="xf-clock">{{ currentNow }}</h3>
            <p class="xf-weekday">{{ weekday }}</p>
        </div>
        <ul class="xf-navigation core">
            <li class="xf-shadow-out">
                <a :href="qq.link">
                    <img v-lazy="qq.icon">
                </a>
            </li>
            <li class="xf-shadow-out">
                <a href="JavaScript:;" @click="changeDayAndNight">
                    <img alt="" :src="isDayAndNight ? dayAndNight[1] : dayAndNight[0]">
                </a>
            </li>
            <li class="xf-shadow-out">
                <a href="JavaScript:;" @click="handleClick">
                    <img v-lazy="wx.icon" alt="">
                </a>
            </li>
            <li v-if="custom.length > 0" v-for="item in custom" :key="item.id" class="xf-shadow-out">
                <a :href="item.link">
                    <img v-lazy="item.icon" alt="">
                </a>
            </li>
        </ul>
        <div class="xf-wire"><span></span></div>
    </header>
</template>

<script setup lang="ts" name="Header">
    import { ref, onMounted, reactive } from 'vue'
    import { storeToRefs } from 'pinia'
    import dayjs from 'dayjs'
    import { v3ImgPreviewFn } from 'v3-img-preview'
    import { useHeaterStore } from '@/store'
    
    import 'dayjs/locale/zh-cn'

    const heaterStore = useHeaterStore()
    let {
        userInfo: {
            value: { avatar, name, profile }
        },
        navigation: {
            value: { qq, wx, custom }
        },
        isDayAndNight
    } = storeToRefs(heaterStore)

    const texture = ref('./assets/images/overlay-tx.jpg')

    const now = dayjs()

    let currentNow = ref(now.format(' HH:mm'))
    let weekday = ref(now.format('MM/DD/ ') + now.locale('zh-cn').format('dddd'))

    const changeToNight = (val: boolean) => {
        let { body } = document
        val ? body.classList.add('xf-night') : body.classList.remove('xf-night')
    }

    onMounted(() => {
        setInterval(() => currentNow.value = dayjs().format(' HH:mm'), 1000)
        // 根据时间昼夜变化
        const hour = now.hour()
        hour > 18 || hour < 6 ? isDayAndNight.value = true : isDayAndNight.value = false
        changeToNight(isDayAndNight.value)
    })

    const handleClick = () => v3ImgPreviewFn(wx.link)

    const dayAndNight = reactive(['./assets/images/light.png', './assets/images/night.png'])

    // 点击昼夜切换
    const changeDayAndNight = () => {
        isDayAndNight.value = !isDayAndNight.value
        changeToNight(isDayAndNight.value)
    }
</script>

<style scoped lang="less">
    .xf-grid(@columns, @gap) {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: @columns;
        grid-template-columns: @columns;
        gap: @gap;
    }

    .xf-header {
        --linear-color: #dedede;
        width: 100%;
        padding-bottom: .8em;
        border-radius: 0 0 30px 30px;
        overflow: hidden;
    
        .xf-vague {
            background: url("../assets/images/dream.webp") no-repeat;
            background-size: cover;
            height: 110px;
            border-radius: 0;
            -webkit-filter: blur(1rem);
            filter: blur(1rem);
        }

        .xf-info {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                font: 200 1rem '宋体', 'SimSun';
            }

            .xf-avatar {
                position: relative;
                width: 100px;
                height: 100px;
                border: 1px solid var(--nitai5-color-1);
                border-radius: 50%;
                margin: -50px auto 0 auto;
                transition: transform .5s;
                overflow: hidden;

                &:hover {
                    transform: rotate(360deg);
                }

                img {
                    width: 100%;
                    border-radius: 50%;

                    &:first-child {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 2;
                        -webkit-mix-blend-mode: multiply;
                        mix-blend-mode: multiply;
                        -webkit-opacity: 0.8;
                        opacity: 0.8;
                    }
                }
            }

            .xf-name {
                margin-top: .625rem;
                font: bold 1.625rem '楷体', '楷体_GB2312';
                line-height: 2rem;
            }

            .xf-profile {
                line-height: 2rem;
                width: 100%;
        
                &::after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 1.75px;
                    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--linear-color) 50%, rgba(41, 128, 185, 0) 100%);
                    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--linear-color)), to(rgba(41, 128, 185, 0)));
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--linear-color) 50%, rgba(41, 128, 185, 0) 100%);
                    margin: 10px auto;
                    border-radius: 10px;
                    transition: background .35s;
                }
            }

            .xf-clock {
                font: bold 3rem 'DOTTEDSONGTIDIAMONDREGULAR';
                letter-spacing: .15em;
            }

            .xf-weekday {
                font-size: 1.15rem;
                line-height: 2.25rem;
            }
        }

        .xf-navigation {
            margin: 1.5em auto;
            max-width: 260px;
            .xf-grid(1fr 1fr 1fr, 1.5em);

            li {
                margin: 0 auto;
                border-radius: 50%;

                &:active {
                    -webkit-box-shadow: var(--nitai5-shadow-int);
                    box-shadow: var(--nitai5-shadow-int);
                }

                a {
                    display: block;
                    width: 50px;
                    height: 50px;
                    margin: .5em;

                    img {
                        width: 100%;
                    }
                }
            }
        }

        .xf-wire {
            position: relative;
            width: 35px;
            height: 4px;
            background-color: var(--nitai5-color-7);
            border-radius: 4px;
            margin: 5px auto;

            span {
                position: absolute;
                left: 0;
                bottom: 0;
                display: inline-block;
                height: 100%;
                width: 13px;
                background-color: var(--nitai5-color-8);
                border-radius: 4px;
            }
        }
    }

    .xf-night .xf-header {
        --linear-color: #0089e9;

        .xf-navigation li:active {
                -webkit-box-shadow: var(--nitai5-shadow-int-dark);
                box-shadow: var(--nitai5-shadow-int-dark);
        }
    }
</style>